import React, {Component} from 'react';
import {connect} from 'react-redux';
import './listNav.scss';
import {Link} from 'react-router-dom';
import $ from 'jquery'
import Loading from '../../../component/loading/loading'
import axios from 'axios'
import Mock from 'mockjs'

Mock.mock('/ssd/', {
        "listnav": ["木门", "背景墙", "榻榻米", "衣柜", "橱柜", "青少年", "窗户", "地板"],
        "data": [{
            "listTitle": "3D木门·全屋定制",
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
        },
            {
                "listTitle": "3D木门·全屋定制",
                "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            },
            {
                "listTitle": "3D木门·全屋定制",
                "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            }]
    }
)
Mock.mock('/ssd?木门', {
        "listnav": ["木门", "背景墙", "榻榻米", "衣柜", "橱柜", "青少年", "窗户", "地板"],
        "data": [{
            "listTitle": "3D木门·全屋定制",
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
        },
            {
                "listTitle": "3D木门·全屋定制",
                "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            },
            {
                "listTitle": "3D木门·全屋定制",
                "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            }]
    }
)
Mock.mock('/ssd?背景墙', {
        "listnav": ["木门", "背景墙", "榻榻米", "衣柜", "橱柜", "青少年", "窗户", "地板"],
        "data": [{
            "listTitle": "3D背景墙！！！！！",
            "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
            "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
        },
            {
                "listTitle": "3D背景墙！！！！！",
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            },
            {
                "listTitle": "3D背景墙！！！！！",
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            }]
    }
)
Mock.mock('/ssd?榻榻米', {
        "listnav": ["木门", "背景墙", "榻榻米", "衣柜", "橱柜", "青少年", "窗户", "地板"],
        "data": [{
            "listTitle": "3D阿是大师大师的",
            "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
            "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
        },
            {
                "listTitle": "3D阿是大师大师的",
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            },
            {
                "listTitle": "3D阿是大师大师的",
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listDist": "简洁的造型干净利落，洗练的造型，从不拖泥带水，就是北欧风格，看似简单，却是至简无形，诠释的是近乎苛刻的时尚生活品质。"
            }]
    }
)

class ListNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            listnav: [],
            data: [],
            loading :false,
            firstIn:true
        }
    }

    componentWillMount() {
        axios.get('/ssd/' )
            .then(response => {
                //console.log(response.data);
                this.setState({
                    listnav: response.data.listnav,
                    data: response.data.data,
                    loading:true
                });
                //console.log(this.state)
            })
        console.log(this.props.searchkeyword);
    }
    

    componentDidUpdate () {
        this.init();
    }

    init() {
        //console.log($('.listRealNav > ul > li').eq(0));
        if(this.state.firstIn){
            $('.listRealNav>ul>li').eq(0).addClass('lactive');
        }

    }
    onClick(e) {
        this.setState({
            firstIn:false
        });
        //console.log(e.target.innerHTML);
        let kw = e.target.innerHTML;
        $(e.target).addClass('lactive').siblings().removeClass('lactive');
        this.setState({loading: false});
        axios.get('/ssd?' + kw)
            .then(response => {
                this.setState({

                    data: response.data.data,
                    loading:true
                });
            })
    }

    render() {
        return (
            <div className='listNav'>
                <div className='lscont'>
                    <div className='listRealNav'>
                        <ul>
                            {this.state.listnav.map((item, key) =>
                                <li key={key} onClick={this.onClick.bind(this)}>{item}</li>
                            )}
                        </ul>

                    </div>
                    <Link to='/screen'>
                        <div className='listSX'>筛选</div>
                    </Link>
                    <div className='zwf'></div>
                </div>
                {
                    !this.state.loading
                        ? <Loading></Loading>
                        :this.state.data && this.state.data.map((item, key) =>
                    <div className='listPart' key={key}>
                        <Link to='/maindetails'>
                            <div className='listPartImg'>
                                <img src={item.listImg} alt=""/>
                            </div>
                        </Link>
                        <div className='listPart2'>
                            <span className='listPart2Title'>{item.listTitle}</span>
                            <Link to='/chatonline' className='listPart2Button'>点击咨询</Link>
                        </div>
                        <div className='listPart3'>
                            <span>{item.listDist}</span>
                        </div>
                    </div>
                )}
            </div>
        )
    }
}

export default connect()(ListNav)